import {PageContainer} from "@ant-design/pro-layout";
import {Button, Tag, Space, Drawer} from 'antd';
import ProList from '@ant-design/pro-list';
import {search} from '@/services/doa/regi'
import {getDetailByID} from '@/services/doa/repo'
import React, {useEffect, useState, useRef} from "react";
import {history} from "umi";
import ProDescriptions from "@ant-design/pro-descriptions";
import ReactJson from "react-json-view";


export default () => {


  const actionRef = useRef();
  const [dos,setDos] = useState([])
  const [currentRow,setCurrentRow] = useState({})
  const [showDetail,setShowDetail] = useState(false)
  useEffect(()=>{
    /**
     * {
    "size": 12,
    "results": [
        {
            "id": "86.5000.470/do.1yMOhm1FYO_bdw",
            "type": "0.TYPE/DO.Metadata",
            "attributes": {
                "metadata": {
                    "标题": "柳熠发推：什么时候由媒体来宣布下任总统了？",
                    "来源": "环球网",
                    "分类": "新闻"
                },
                "doOwner": "anonymous"
            },
            "doID": "86.5000.470/do.1yMOhm1FYO_bdw"
        },
        {
            "标题": "柳熠发推：什么时候由媒体来宣布下任总统了？",
            "来源": "环球网",
            "分类": "新闻",
            "doID": "86.5000.470/do.ObzQZfA5s9_bdw"
        },
     */
    search({query:history.location?.query?.query}).then((response)=>{
      if(response?.success){
        const retrieveDos = JSON.parse(response?.data)
        console.log(retrieveDos)
        if(retrieveDos?.results){
          setDos(retrieveDos?.results.map((item)=>{
            if(item?.hasOwnProperty("attributes")){
              const metaData = item?.attributes?.metadata
              return {doi:item.doID,title:metaData?.title, description:metaData?.description, topic:metaData?.topic, source:metaData?.source}
            }else{
              return {doi:item.doID,title:item?.title, description:item?.description, topic:item?.topic, source:item?.source}
            }
          }))
        }
      }
    })
  }, [])

  const preview = (doi) => {
    getDetailByID({"doID":doi}).then((response)=>{
      if(response.success){
        const doData = response.data
        setCurrentRow(JSON.parse(doData))
      }
      setShowDetail(true)
    })
  }


  useEffect(()=>{
    console.log(dos)
    actionRef.current.reloadAndRest()
  },[dos])


  return (
    <PageContainer
    >
      <ProList
        actionRef={actionRef}
        toolBarRender={() => {
          return [

          ];
        }}
        search={{
          filterType: 'light',
        }}
        rowKey="name"
        headerTitle="查询结果"
        request={async (params = {}) =>{
          return Promise.resolve({
            data: dos,
            success: true,
          });
        }}
        pagination={{
          pageSize: 10,
        }}
        showActions="hover"
        metas={{
          title: {
            dataIndex: 'title',
            search: false,
          },
          description: {
            dataIndex: 'description',
            search: false,
          },
          subTitle: {
            dataIndex: 'source',
            render: (_, row) => {
              return (
                <Space size={0}>
                  {row.source}
                </Space>
              );
            },
            search: false,
          },
          actions: {
            render: (text, row) => [
              <a key="preview" onClick={()=>{console.log("preview: " + row.doi);preview(row.doi);}}>
                预览
              </a>,
              <a href={"/doa/dodetail/resolve?doi="+row.doi} target="_blank" rel="noopener noreferrer" key="view">
                查看详情
              </a>,
            ],
            search: false,
          },
        }}
      />

      <Drawer
        width={600}
        visible={showDetail}
        onClose={() => {
          setCurrentRow(undefined);
          setShowDetail(false);
        }}
        closable={false}
      >
        <ReactJson src={currentRow}/>
      </Drawer>
    </PageContainer>
  )
};
